<div class="container-fluid">
  <div class="row">
    <div class="col bg-dark text-white">
      <a class="navbar-brand">SPORTS STORE</a>
      <cart-summary></cart-summary>
    </div>
  </div>
  <div class="row">
    <div class="col-3 p-2">
      <button
        class="btn btn-block btn-outline-primary"
        (click)="changeCategory()"
      >
        Home
      </button>
      <button
        *ngFor="let cat of categories"
        class="btn btn-outline-primary btn-block"
        [class.active]="cat == selectedCategory"
        (click)="changeCategory(cat)"
      >
        {{ cat }}
      </button>
      <button class="btn btn-block btn-danger mt-5" routerLink="/admin">
          Admin
      </button>
    </div>
    <div class="col-9 p-2">
      <div *ngFor="let product of products" class="card m-1 p-1 bg-light">
        <h4>
          {{ product.name }}
          <span class="bgdge badge-pill badge-primary float-right">
            {{ product.price | currency: "USD":"symbol":"2.2-2" }}
          </span>
        </h4>
        <div class="card-text bg-white p-1">{{ product.description }}
            <button class="btn btn-success btn-sm float-right"
            (click)="addProductToCart(product)">
                Add To Cart
            </button>
        </div>
      </div>
      <div class="form-inline float-left mr-1">
        <select
          class="form-control"
          [value]="productsPerPage"
          (change)="changePageSize($event.target.value)"
        >
          <option value="3">3 per Page</option>
          <option value="4">4 per Page</option>
          <option value="5">5 per Page</option>
          <option value="6">6 per Page</option>
        </select>
      </div>
      <div class="btn-group float-right">
        <button
          class="btn btn-outline-primary"
          *counter="let page of pageCount"
          (click)="changePage(page)"
          [class.active]="page == selectedPage"
        >
          {{ page }}
        </button>
      </div>
    </div>
  </div>
</div>
